<template>
  <div class="container box">
    <h5>更多招聘内容</h5>
    <div class="child-box">
      <table class="table table-success">
        <thead>
          <tr>
            <th class="table-success">序号</th>
            <th class="table-success" width="300">公司名称</th>
            <th class="table-success">岗位 </th>
            <th class="table-success">待遇</th>
            <th class="table-success">专业要求 </th>
            <th class="table-success">招聘人数 </th>
            <th class="table-success">状态</th>
            <th class="table-success" width="70">详情</th>
          </tr>
        </thead>

        <tbody>
          <tr class="table-row" v-for="(item,index) in data.table" :key="index">
            <td>{{ index+1 }}</td>
            <td class="pointer" @click="toWhat2(item.company)">{{ item.company }}</td>
            <td class="pointer" @click="toWhat(item.job)">{{ item.job }}</td>
            <td>{{ item.money }}</td>
            <td>{{ item.grade }}</td>
            <td>{{ item.people }}</td>
            <td>{{ item.isjob }}</td>
            <!-- <td class="goto"><span @click="gotodetail(item.id)">&gt;</span></td> -->
            <td class="goto"><span @click="aaa(index)">&gt;</span></td>
          </tr>
        </tbody>

      </table>
      <!-- <router-link to="/all-job">更多&gt;&gt;</router-link> -->
    </div>

  </div>


</template>

<script setup>
import { onMounted, ref, onDeactivated, reactive } from "vue"
import router from "../router"

//引入store钩子
import useCounterStore from '@/stores/counter.js'
//实现仓库数据双向绑定
import {storeToRefs} from 'pinia'

import axios from "axios"


//创建仓库对象
const store=useCounterStore()
let {table, inviteNum}=storeToRefs(store)

const timer = ref(0)
const index = ref(0)
onMounted(()=>{ //组件挂载时的生命周期执行的方法
    timer.value = window.setInterval(function logname() {
        // 其他定时执行的方法
        // getData();
        // index.value = index.value + 1
        // console.log("测试"+ index.value);
    }, 3000);
})
  onDeactivated(()=>{ //离开当前组件的生命周期执行的方法
    window.clearInterval(timer.value);
})

const aaa = (id)=> {
  console.log(id + 1);
  inviteNum.value = id + 1
  router.push("/whats-job")
  // console.log(arr)

}

const getData =()=> {
  axios.get('http://127.0.0.1:9001/test/job.php').then(re=> {
    console.log(re.data);

    data.table = re.data

  }).catch(e=> {
    console.log(e);
  })
}
getData()


const data = reactive({
  table: [
    // {
    //   id: 1,
    //   where: "嘉里大通物流有限公司广州开发区分公司",
    //   what:	"实习生",
    //   money: "3500-5000",
    //   demand:	"不限",
    //   num: "20",
    //   status: "招聘中"
    // },
    // {
    //   id: 2,
    //   where: "嘉里大通物流有限公司广州开发区分公司",
    //   what:	"实习生",
    //   money: "3500-5000",
    //   demand:	"不限",
    //   num: "20",
    //   status: "招聘中"
    // }
  ],

  baseUrl: "https://www.zhihu.com/search?type=content&q=",
  baseUrl2: "https://www.qcc.com/web/search?key="
})


const toWhat = (i)=> {
  window.open(data.baseUrl + i,'_blank');
}
const toWhat2 = (i)=> {
  window.open(data.baseUrl2 + i,'_blank');
}

</script>

<style scoped>
.pointer {
  cursor: pointer;
}
.box {
  width: 95%;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
}
.child-box {
  position: relative;
  padding-bottom: 30px;
}
.child-box>a {
  text-decoration: none;
  color: #000;
  position: absolute;
  bottom: 0;
  right: 10px;
}
.table-row>td:last-child span {
  cursor: pointer;
}
.goto:hover {
  color: blue;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .table {
    font-size: 12px;
  }
}

</style>